<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>通讯录管理</el-breadcrumb-item>
				<el-breadcrumb-item>部门管理</el-breadcrumb-item>
			</el-breadcrumb>
			<!-- <breadcrumb></breadcrumb> -->
		</div>
		<div class="tableNavBox">
			<div class="tableTitle">全体部门列表</div>
			<div class="menberConTitle">
				<el-button round size="mini" type="primary" @click="addDepartmentBtn" v-has="'添加部门'">添加部门</el-button>
				<el-button round size="mini" type="danger" :disabled="departmentListAll.length >0?false:true" @click="deleteSubdivision('')" v-has="'删除部门'">删除部门</el-button>
				<el-button round size="mini" type="primary" :disabled="departmentListAll.length >0?false:true" @click="toTopSubdivision()">置顶</el-button>
			</div>
			<div class="tableBoxTable" style="margin-bottom: 50px;">
				<el-table :data="departmentListAll" style="width: 100%;" row-key="id" tooltip-effect="dark" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
				 @selection-change="departmentSelectionChange" highlight-current-row @row-click="departmentCurrentChange">
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column prop="labelName" label="部门名称"></el-table-column>
					<!-- <el-table-column prop="address" label="平台编号"></el-table-column> -->
					<el-table-column prop="directorName" label="部门主管">
						<template slot-scope="scope">
							{{scope.row.directorName?scope.row.directorName:'暂无主管'}}
						</template>
					</el-table-column>
					<!-- <el-table-column prop="address" label="部门群"></el-table-column> -->
					<el-table-column prop="address" label="操作">
						<template slot-scope="scope">
							<el-button type="text" size=" " @click="toMessage(scope.row)" v-has="'添加部门'">聊天</el-button>
							<el-button type="text" size=" " @click="addSubdivision(scope.row)" v-has="'添加部门'">添加子部门</el-button>
							<el-button type="text" size=" " @click="editorSubdivision(scope.row)" v-has="'b-编辑'">编辑</el-button>
							<el-button type="text" size=" " @click="deleteSubdivision(scope.row)" v-has="'b-删除'" class="deleteBtn">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="tableTitle">部门成员列表</div>
			<div class="menberConTitle">
				<el-button round size="mini" type="primary" @click="addMenberDialog = true" v-has="'添加成员'">添加成员</el-button>
				<!-- <el-button round size="mini" type="primary" :disabled="menberData.tableData.length >0?false:true" @click="addMenberDialog = true" v-has="'添加成员'">添加成员</el-button> -->
				<el-button round size="mini" type="primary" :disabled="menberData.tableData.length >0?false:true" @click="deleteDepartmentMenber" v-has="'调出部门'">调出部门</el-button>
				<!-- <el-button round size="mini" type="primary" :disabled="menberData.tableData.length >0?false:true" @click="deleteDepartmentMenber">批量调出</el-button> -->
				<!-- <el-button round size="mini" type="primary" :disabled="menberData.tableData.length >0?false:true" @click="deleteDepartmentMenber">移除</el-button> -->
			</div>
			<div class="tableBoxTable">
				<el-table :data="menberData.tableData" style="width: 100%;margin-bottom: 20px;" @selection-change="menberSelectionChange"
				 tooltip-effect="dark">
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="jobNumber" label="工号"></el-table-column>
					<el-table-column prop="state" label="审核">
						<template slot-scope="scope">
							<div v-if="scope.row.state == 'SUCCESS'">已认证</div>
							<div v-else-if="scope.row.state == 'PROCESS'">认证中</div>
							<div v-else-if="scope.row.state == 'FAIL'">认证失败</div>
							<div v-else>未认证</div>
						</template>
					</el-table-column>
					<el-table-column prop="mainCompanyName" label="主团队及部门"></el-table-column>
					<el-table-column prop="dutiesName" label="职务"></el-table-column>
					<!-- <el-table-column prop="rankName" label="职级">
						<template slot-scope="scope">
							{{scope.row.rankName?scope.row.rankName:scope.row.cusRankName?scope.row.cusRankName:'暂无职级'}}
						</template>
					</el-table-column> -->
					<el-table-column prop="address" label="岗位">
						<template slot-scope="scope">
							<div v-if="scope.row.postEntityList.length > 0">
								<div v-for="item in scope.row.postEntityList" :key="item.id">{{item.labelName}}</div>
							</div>
							<div v-else>暂无岗位</div>
						</template>
					</el-table-column>
				</el-table>
				<pagina-tion :totalNum="menberData.pageTotal" @paginaClick="paginaClick"></pagina-tion>
			</div>
		</div>
		<el-dialog :title="dialogVisibleTitle" :visible.sync="dialogVisible" width="30%" class="dialogVisible">
			<span>
				<el-form label-width="80px" :model="adddepartment">
					<el-form-item label="部门名称">
						<el-input v-model="adddepartment.departmentName"></el-input>
					</el-form-item>
					<el-form-item label="部门主管">
						<el-select v-model="adddepartment.director" placeholder="请选择">
							<el-option v-for="item in adddepartmentMenberData" :key="item.id" :label="item.name" :value="item.userId"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="adddepartmentFunction">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 添加成员弹窗 -->
		<el-dialog title="添加成员" :visible.sync="addMenberDialog">
			<el-table :data="adddepartmentMenberDataIsNotAdministrator" @selection-change="menberSelectionChangedialog"
			 tooltip-effect="dark" ref="addMenberTable" style="height: 70rem;">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column property="name" label="姓名"></el-table-column>
				<el-table-column property="mainCompanyName" label="主团队"></el-table-column>
				<el-table-column property="dutiesName" label="职务">
					<template slot-scope="scope">
						{{scope.row.dutiesName?scope.row.dutiesName:'暂无职务'}}
					</template>
				</el-table-column>
				<el-table-column property="address" label="职级">
					<template slot-scope="scope">
						{{scope.row.rankName?scope.row.rankName:scope.row.cusRankName?scope.row.cusRankName:'暂无职级'}}
					</template>
				</el-table-column>
				<el-table-column property="address" label="岗位">
					<template slot-scope="scope">
						<div v-if="scope.row.postEntityList && scope.row.postEntityList.length > 0">
							<div v-for="posts in scope.row.postEntityList" :key="posts.id">{{ posts.labelName }}</div>
						</div>
						<div v-else>暂无岗位</div>
					</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addMenberDialog = false">取 消</el-button>
				<el-button type="primary" @click="addMenberToDepartmentFunction">确 定</el-button>
			</span>
		</el-dialog>
		
	</div>
</template>

<script>
	import breadcrumb from '../components/breadcrumb.vue'
	export default {
		components: {
			breadcrumb
		},
		data() {
			return {
				companyId: '',
				companyName: this.$store.state.company.companyName,
				userId: '',
				// activeName: 'first',
				// formInline: {

				// },
				menberData: {
					tableData: [],
					pageTotal: 0,
					searchData: {
						companyId: '',
						departmentId: '',
						userName: '',
						jobNumber: '',
						page: 1,
						pageSize: $globalData.pageSize,
						administrator: '',
						departmentPidParam: ''
					}
				},
				// 所有-----部门管理
				departmentListAll: [],
				dialogVisible: false,
				dialogVisibleTitle: '添加部门',
				selectDepartmentData: [], // 全选或多选数据
				adddepartmentMenberData: [], // 公司所有成员列表
				adddepartmentMenberDataIsNotAdministrator: [], // 公司所有非管理员成员列表
				adddepartment: {
					companyId: '', // 公司Id
					userId: '',
					departmentName: '', // 部门名称
					id: '', // 当前点击的部门id
					pid: '', // 父级Id
					pidParam: '', // 父级Id参数
					director: '', // 部门主管人Id
					dutiesName: '' // 职务名称
				},
				/// 部门成员
				selectDepartmentMenberData: [], // 全选或多选数据
				// 添加成员数据
				addMenberDialog: false,
				addMenberDialogDataList: [], // 全选或多选数据
				thisSelectBm: {
					id: '',
					departmentPidParam: ''
				}
			}
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 212)
			let store = this.$store.state.user
			this.adddepartment.userId = this.userId = store.userInfo.id
			this.companyId = this.menberData.searchData.companyId = this.adddepartment.companyId = this.$store.state.company.selectCompanyId?this.$store.state.company.selectCompanyId:this.$store.state.company.companyId
			if (this.companyId) {
				this.getMenberList()
				// this.getMenberTableList()
				this.getDepartmentByCompanyIdList()
			}

		},
		watch: {
			dialogVisible(newData) {
				// 监听添加部门弹窗
				if (!newData) {
					this.adddepartment.departmentName = ''
					this.adddepartment.director = ''
					this.adddepartment.pid = ''
					this.adddepartment.pidParam = ''
				}
			},
			addMenberDialog(newData) {
				// 监听添加成员弹窗
				if (!newData) {
					this.$refs.addMenberTable.clearSelection()
					this.addMenberDialogDataList = []
				} else {
					this.getMenberListIsNotAdministrator()
				}
			}
		},
		methods: {
			menberSelectionChangedialog(e) {
				// addMenberDialogDataList
				
				this.addMenberDialogDataList = e
			},
			addMenberToDepartmentFunction() {
				// 添加成员到部门
				// console.log(this.thisSelectBm.departmentPidParam)
				// return
				if (this.addMenberDialogDataList.length < 1) {
					this.$message.error('请选择要添加的成员')
					return
				}
				let ids = []
				this.addMenberDialogDataList.forEach((v) => {
					ids.push(v.id)
				})
				// this.menberData.searchData.departmentId = this.departmentListAll[0].id
				// this.menberData.searchData.departmentPidParam = this.departmentListAll[0].pidParam
				this.$request.postForm(this.$api.addDepartmentMembers, {
					id: ids.join(','),
					userId: this.userId,
					companyId: this.companyId,
					departmentId: this.thisSelectBm.id,
					dutyName: '',
					dutiesId: '',
					departmentPidParam: this.thisSelectBm.departmentPidParam
				}).then(res => {
					if (res.code == 200) {
						this.$message.success('添加成功')
						this.addMenberDialog = false
						this.getMenberTableList()
					}
				})
			},
			addDepartmentBtn() {
				// 添加部门按钮
				this.dialogVisible = true
				this.dialogVisibleTitle = '添加部门'
			},
			addSubdivision(item) {
				// 添加子部门
				this.adddepartment.pid = item.id
				this.adddepartment.pidParam = item.pidParam
				this.dialogVisible = true
				this.dialogVisibleTitle = '添加子部门'
			},
			editorSubdivision(item) {
				// 编辑部门
				// console.log(item)
				this.adddepartment.id = item.id
				this.adddepartment.departmentName = item.departmentName
				this.adddepartment.director = item.director
				this.adddepartment.pid = item.pid
				this.adddepartment.pidParam = item.pidParam
				
				
				// console.log(this.adddepartment)
				//记录当前点击的公司
				this.thisSelectBm.id = item.id
				this.thisSelectBm.departmentPidParam = item.pidParam


				this.dialogVisible = true
				this.dialogVisibleTitle = '编辑部门'
			},
			departmentSelectionChange(e) {
				// 全选或多选数据
				this.selectDepartmentData = e
				// console.log(this.selectDepartmentData)
				// if(e.length > 0){
				// 	e.forEach((v) => {
				// 		this.selectDepartmentData.push(v.id)
				// 	})
				// }
				
			},
			toTopSubdivision(){
				// 部门置顶
				// console.log(this.selectDepartmentData)
				if(this.selectDepartmentData.length < 1){
					this.$message.error('选择要置顶的部门')
					return
				}
				let ids = []
				this.selectDepartmentData.forEach(v=>{
					ids.push(v.id)
				})
				this.$request.postForm(this.$api.topMarkDepartment, {
					ids: ids.join(',')
				}).then(res => {
					if (res.code == 200) {
						this.$message.success('置顶成功')
						this.selectDepartmentData = []
						this.getDepartmentByCompanyIdList()
					}
				})
			},
			deleteSubdivision(item) {
				// 删除部门
				if (item) {
					this.selectDepartmentData.push(item)
				}
				// return
				if(this.selectDepartmentData.length < 1){
					this.$message.error('选择要删除的部门')
					return
				}
				let ids = []
				this.selectDepartmentData.forEach(v=>{
					ids.push(v.id)
				})
				this.$confirm(`确定要删除${!item?'所选中的':'该'}部门吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.removeDepartment, {
						id: ids.join(','),
						userId: this.userId,
						companyId: this.companyId
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('删除成功')
							this.selectDepartmentData = []
							this.getDepartmentByCompanyIdList()
						}
					})
				})
			},
			paginaClick(val) {
				// 分页组件方法
				this.menberData.searchData.page = val
				this.getMenberTableList()
			},
			departmentCurrentChange(e) {
				// 单击表格选择公司
				// console.log(e)
				this.menberData.searchData.departmentId = e.id
				this.menberData.searchData.departmentPidParam = e.pidParam
				// 记录当前选择的部门
				this.thisSelectBm.id = e.id
				this.thisSelectBm.departmentPidParam = e.pidParam

				this.menberData.searchData.page = 1
				this.getMenberTableList()
			},
			getMenberTableList() {
				// 获取所有成员列表-----表格
				this.$request.postForm(this.$api.getUsersByCompanyId, this.menberData.searchData).then(res => {
					if (res.code == 200) {
						this.menberData.tableData = res.data.items
						this.menberData.pageTotal = res.data.totalPage
					}
				})
			},
			getMenberList() {
				// 获取所有成员列表
				this.$request.postForm(this.$api.getUsersByCompanyId, {
					companyId: this.companyId,
					userName: '',
					jobNumber: '',
					page: 1,
					pageSize: 2000,
					administrator: ''
				}).then(res => {
					if (res.code == 200) {
						this.adddepartmentMenberData = res.data.items
					}
				})
			},
			getMenberListIsNotAdministrator() {
				// 获取所有非管理员成员列表
				this.$request.postForm(this.$api.getUsersByCompanyId, {
					companyId: this.companyId,
					userName: '',
					jobNumber: '',
					page: 1,
					pageSize: 2000,
					administrator: ''
				}).then(res => {
					if (res.code == 200) {
						this.adddepartmentMenberDataIsNotAdministrator = res.data.items
					}
				})
			},
			getDepartmentByCompanyIdList() {
				// 获取所有部门列表
				this.$request.postForm(this.$api.getDepartmentByCompanyId, {
					companyId: this.companyId
				}).then(res => {
					if (res.code == 200) {
						this.departmentListAll = res.data
						if (this.departmentListAll.length > 0 && this.dialogVisibleTitle == '添加部门') {
							this.menberData.searchData.departmentId = this.departmentListAll[0].id
							this.menberData.searchData.departmentPidParam = this.departmentListAll[0].pidParam
							// 记录当前选择的部门
							this.thisSelectBm.id = this.departmentListAll[0].id
							this.thisSelectBm.departmentPidParam = this.departmentListAll[0].pidParam
							this.menberData.searchData.page = 1
							this.$nextTick(() => {
								this.getMenberTableList()
							})
						}
					}
				})
			},
			adddepartmentFunction() {
				// 新增部门
				// 赋值给查询接口，更新部门成员数据
				// console.log(this.adddepartment)
				// return
				this.menberData.searchData.id = this.thisSelectBm.id
				this.menberData.searchData.departmentPidParam = this.thisSelectBm.departmentPidParam
				this.menberData.searchData.page = 1

				if (this.dialogVisibleTitle == '编辑部门') {
					this.$request.postForm(this.$api.updateDepartment, this.adddepartment).then(res => {
						if (res.code == 200) {
							this.$message.success('修改成功')
							this.dialogVisible = false
							// 更新部门列表
							this.getDepartmentByCompanyIdList()
							// 更新部门成员列表
							// setTimeout(()=>{
							this.getMenberTableList()
							// },300)
						}
					})
				} else {
					this.$request.postForm(this.$api.addDepartment, this.adddepartment).then(res => {
						if (res.code == 200) {
							this.$message.success('添加成功')
							this.dialogVisible = false
							this.getDepartmentByCompanyIdList()
							this.getMenberTableList()
						}
					})
				}
			},
			menberSelectionChange(e) {
				// 全选或多选成员列表数据
				// console.log(e)
				if (e.length>0) {
					e.forEach((v) => {
						this.selectDepartmentMenberData.push(v.id)
					})
				} else{
					this.selectDepartmentMenberData = []
				}
			},
			deleteDepartmentMenber() {
				// 移除部门成员
				// console.log(this.selectDepartmentMenberData)
				if (this.selectDepartmentMenberData.length < 1) {
					this.$message.error('请先选择要移除的成员')
					return
				}
				// if(this.addMenberDialogDataList.length < 1){
				// 	this.$message.error('请选择要添加的成员')
				// 	return
				// }
				// let ids = []
				// this.addMenberDialogDataList.forEach((v)=>{
				// 	ids.push(v.id)
				// })

				this.$confirm(`确定要将选中的成员移除当前部门吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.moveOutDepartment, {
						id: this.selectDepartmentMenberData.join(','),
						userId: this.userId,
						companyId: this.companyId
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('移除成功')
							this.menberData.searchData.page = 1
							this.selectDepartmentMenberData = []
							this.getMenberTableList()
							this.getDepartmentByCompanyIdList()
						}
					})
				})
			},
			toMessage(row){
				// 聊天
				sessionStorage.setItem('applyUserId', row.id)
				sessionStorage.setItem('applyChatType', '2')
				const url = `/addresslist/interior/message?t=${new Date().getTime()}`
				this.$router.push(url)
			}



		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}
.deleteBtn{
		color: #F42929;
	}
	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}
</style>
